Angular অ্যাপে, Services এবং Dependency Injection (DI) একটি শক্তিশালী উপায় যা বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে ব্যবহৃত হয়। Services হল একটি বিশেষ ক্লাস যা অ্যাপের বিভিন্ন কম্পোনেন্টে শেয়ারযোগ্য লজিক বা ডেটা প্রদান করে। Dependency Injection (DI) একটি ডিজাইন প্যাটার্ন যা কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করতে সাহায্য করে এবং Angular এই প্রক্রিয়াটি স্বয়ংক্রিয়ভাবে পরিচালনা করে।
এখানে একটি বাস্তব উদাহরণ দেওয়া হলো যেখানে Services এবং Dependency Injection ব্যবহার করে এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা শেয়ার করা হবে।
১. Service তৈরি করা
প্রথমে একটি DataService তৈরি করুন যা ডেটা শেয়ার করবে।
ionic generate service data
এই কমান্ডটি data.service.ts ফাইল তৈরি করবে।
১.১ DataService এ ডেটা রাখা
এখন data.service.ts ফাইলে একটি সিম্পল ডেটা প্রপার্টি এবং একটি মেথড তৈরি করুন, যা ডেটা প্রদান করবে।
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data: string = "Hello from DataService!";
constructor() { }
// ডেটা ফেরত দেওয়া
getData(): string {
return this.data;
}
// ডেটা সেট করা
setData(newData: string): void {
this.data = newData;
}
}
এখানে:
dataএকটি প্রাইভেট ভেরিয়েবল যা ডেটা সংরক্ষণ করবে।getData()মেথডটি ডেটা ফেরত দেবে।setData()মেথডটি নতুন ডেটা সেট করতে সাহায্য করবে।
২. DataService ব্যবহার করে Data Sharing
এখন, আমরা দুটি কম্পোনেন্ট তৈরি করবো এবং সেগুলির মধ্যে ডেটা শেয়ার করার জন্য DataService ব্যবহার করবো।
২.১ কম্পোনেন্ট ১ - HomePage (ডেটা পাঠানো)
প্রথমে একটি HomePage কম্পোনেন্ট তৈরি করুন, যেখানে আমরা DataService ব্যবহার করে ডেটা সেট করব।
ionic generate page home
এখন, home.page.ts ফাইলে DataService ইনজেক্ট করুন এবং ডেটা সেট করুন।
import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private dataService: DataService) {}
// ডেটা সেট করা
setData() {
this.dataService.setData("New data set from HomePage!");
}
}
এখানে:
DataServiceকে DI এর মাধ্যমে ইনজেক্ট করা হয়েছে।setData()মেথডটিDataServiceএর মাধ্যমে নতুন ডেটা সেট করছে।
২.২ কম্পোনেন্ট ২ - AboutPage (ডেটা গ্রহণ করা)
এখন, AboutPage কম্পোনেন্টে ডেটা গ্রহণ করার জন্য DataService ব্যবহার করুন।
ionic generate page about
এখন, about.page.ts ফাইলে DataService ইনজেক্ট করুন এবং getData() মেথডের মাধ্যমে ডেটা গ্রহণ করুন।
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-about',
templateUrl: 'about.page.html',
styleUrls: ['about.page.scss'],
})
export class AboutPage implements OnInit {
data: string;
constructor(private dataService: DataService) {}
ngOnInit() {
// ডেটা গ্রহণ করা
this.data = this.dataService.getData();
}
}
এখানে:
DataServiceইনজেক্ট করা হয়েছে।ngOnInit()মেথডেgetData()মেথডটি কল করে ডেটা নেওয়া হয়েছে।
২.৩ HomePage এবং AboutPage এর মধ্যে নেভিগেশন
এখন, আমরা HomePage থেকে AboutPage এ নেভিগেট করতে Ionic Routing ব্যবহার করব।
home.page.html ফাইলে একটি বাটন যোগ করুন, যা AboutPage এ নেভিগেট করবে।
<ion-content>
<ion-button (click)="setData()">Set Data</ion-button>
<ion-button routerLink="/about">Go to About Page</ion-button>
</ion-content>
এখানে, প্রথম বাটনটি setData() মেথড কল করবে, যা DataService এর মাধ্যমে ডেটা সেট করবে। দ্বিতীয় বাটনটি /about রাউটিং এ নেভিগেট করবে, যেখানে ডেটা প্রদর্শিত হবে।
৩. Final Testing
এখন, আপনি যখন HomePage এ ডেটা সেট করবেন এবং AboutPage এ গিয়ে ডেটা দেখতে পারবেন। HomePage তে "Set Data" বাটনে ক্লিক করলে AboutPage তে নতুন সেট করা ডেটা দেখানো হবে।
সারাংশ
- Services Angular অ্যাপে এমন একটি শ্রেণী যা অ্যাপের বিভিন্ন অংশে শেয়ারযোগ্য ডেটা বা লজিক প্রদান করে।
- Dependency Injection (DI) এর মাধ্যমে Angular কম্পোনেন্ট এবং সার্ভিসের মধ্যে সম্পর্ক স্থাপন করে।
- আমরা DataService তৈরি করে এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা শেয়ার করেছি।
- setData() এবং getData() মেথড ব্যবহার করে ডেটা এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে পাঠানো এবং গ্রহণ করা হয়েছে।
এই পদ্ধতি ব্যবহার করে আপনি সহজেই অ্যাপের মধ্যে ডেটা শেয়ার করতে পারবেন এবং Angular অ্যাপ্লিকেশনের স্থিতিশীলতা ও স্কেলেবিলিটি বাড়াতে পারবেন।
Read more
